<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="分类搜索">
                <el-select id="label-width" v-model="formInline.search">
                    <el-option label="下单时间" value="startTime"></el-option>
                    <el-option label="租客姓名" value="name"></el-option>
                    <el-option label="车位号查询" value="number"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="formInline.user"
                    placeholder="搜索内容,如:张三"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeSubmit">查询</el-button>
            </el-form-item>
            <el-form-item label="分类查询">
                <el-select v-model="formInline.region" @change="onSubmit">
                    <el-option label="所有订单" :value="0"></el-option>
                    <el-option label="未支付" :value="1"></el-option>
                    <el-option label="已支付" :value="2"></el-option>
                    <el-option label="已取消" :value="3"></el-option>
                    <el-option label="已完成" :value="4"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-table :data="orders" style="width: 100%">
            <el-table-column label="下单时间">
                <template slot-scope="scope">
                    {{ scope.row.startTime }}
                    <!-- <img :src="'http://localhost:3000/images/'" alt="" /> -->
                </template>
            </el-table-column>
            <el-table-column label="租客信息">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>身份证: {{ scope.row.tenantsId.iDCard }}</p>
                        <p>手机号码: {{ scope.row.tenantsId.phone }}</p>
                        <p>信用值: {{ scope.row.tenantsId.credits }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.tenantsId.name
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="支付/取消时间">
            </el-table-column>
            <el-table-column prop="backTime" label="归还时间">
            </el-table-column>
            <el-table-column label="车位信息">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>车位地址: {{ scope.row.parkingsId.address }}</p>
                        <p>产权信息: {{ scope.row.parkingsId.property }}</p>
                        <p>出租周期: {{ scope.row.parkingsId.cycle }}</p>
                        <p>价格: {{ scope.row.parkingsId.price }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium"
                                >车位号:{{
                                    scope.row.parkingsId.number
                                }}</el-tag
                            >
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <!-- 用函数判断订单状态 -->
                    {{ state(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column label="评论">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.state == 4" type="success"
                        >评论</el-button
                    >
                    <el-button v-else type="warning" disabled
                        >不能评论</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
    "orders"
);
const {
    mapActions: lessorsActions,
    mapState: lessorsState,
} = createNamespacedHelpers("lessors");
export default {
    data() {
        return {
            formInline: {
                user: "",
                region: 0,
                search: "startTime",
            },
        };
    },
    async mounted() {
        const lessorsData = await this.isLogin();
        if (lessorsData[0]._id) {
            this.getOrders({ lessorsId: lessorsData[0]._id });
            console.log(this.orders);
        } else {
            console.log("未登录");
        }
    },
    methods: {
        ...mapActions(["getOrders"]),
        ...mapMutations(["changePageSize", "clickPage"]),
        ...lessorsActions(["isLogin"]),
        state(state) {
            if (state == 1) {
                return "未支付";
            } else if (state == 2) {
                return "已支付";
            } else if (state == 3) {
                return "已取消";
            } else if (state == 4) {
                return "已完成";
            }
        },
        // 下拉框搜索
        onSubmit() {
            // console.log(this.formInline.region);
            if (this.formInline.region == 0) {
                this.getOrders({ lessorsId: this.lessorsAccount[0]._id });
            } else {
                this.getOrders({
                    lessorsId: this.lessorsAccount[0]._id,
                    state: this.formInline.region,
                });
            }
        },
        // 内容搜索
        changeSubmit() {
            this.getOrders({
                lessorsId: this.lessorsAccount[0]._id,
                type: this.formInline.search,
                value: this.formInline.user,
            });
        },
        // 每页显示条数
        handleSizeChange(val) {
            // 改变每页显示条数
            this.changePageSize(val);
            // 并且重新获取数据
            this.getOrders({ lessorsId: this.lessorsAccount[0]._id });
        },
        // 翻页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.clickPage(val);
            this.getOrders({ lessorsId: this.lessorsAccount[0]._id });
        },
    },
    computed: {
        // 获取订单数据
        ...mapState(["orders", "currentPage", "pageSize", "total", "lastPage"]),
        ...lessorsState(["lessorsAccount"]),
    },
};
</script>

<style lang="scss">
#search {
    width: 110px;
}
#label-width {
    width: 120px;
}
</style>